<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    .container {
      padding: 20px;
    }

    .input-container {
      position: relative;
      margin-bottom: 20px;
    }

    .input-container input[type="text"] {
      width: 100%;
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
    }

    .fixed-view {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 10px;
      display: none;
      background-color: #f2f2f2;
      border-top: 1px solid #ccc;
    }

    .fixed-view input[type="text"] {
      width: calc(100% - 80px);
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
    }

    .fixed-view button {
      width: 60px;
      padding: 10px;
      font-size: 16px;
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="input-container">
      <input type="text" placeholder="输入框1">
    </div>
    <div class="input-container">
      <input type="text" placeholder="输入框1">
    </div>
    <div class="input-container">
      <input type="text" placeholder="输入框1">
    </div>
    <div class="input-container">
      <input type="text" placeholder="输入框1">
    </div>
    <div class="input-container">
      <input type="text" placeholder="输入框1">
    </div>
    <div class="input-container">
      <input type="text" placeholder="输入框1">
    </div>
    <div class="input-container">
      <input type="text" placeholder="输入框2">
    </div>
    <div class="input-container">
      <input type="text" placeholder="输入框3">
    </div>
  </div>
  <div class="fixed-view">
    <input type="text" placeholder="在键盘上方的输入框">
    <button>发送</button>
  </div>


  <!-- [移动端调试神器vConsole使用详解](https://www.jb51.net/article/244750.htm) -->
  <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
  <script>
    // VConsole 默认会挂载到 `window.VConsole` 上
    var vConsole = new window.VConsole();
    // 接下来即可照常使用 `console` 等方法
    console.log('Hello world');

    // 结束调试后，可移除掉
    vConsole.destroy();
  </script>


  <script>
    // 监听键盘事件
    window.addEventListener('keyboardWillShow', function (e) {
      var keyboardHeight = e.keyboardHeight;
      // 处理键盘显示事件，可以根据键盘高度进行适配操作
      console.log('键盘高度：', keyboardHeight);
    });

    window.addEventListener('keyboardWillHide', function () {
      // 处理键盘隐藏事件
      console.log('键盘已隐藏');
    });

    window.addEventListener('resize', function () {
      console.log('键盘已resize');
      var viewHeight = window.innerHeight;
      var fixedView = document.querySelector('.fixed-view');
      var inputContainers = document.querySelectorAll('.input-container');
      var lastInputContainer = inputContainers[inputContainers.length - 1];
      var lastInputContainerRect = lastInputContainer.getBoundingClientRect();
      var fixedViewHeight = fixedView.offsetHeight;

      if (window.innerHeight < viewHeight) {
        // 键盘弹出，使fixed-view显示
        fixedView.style.display = 'block';
      } else {
        // 键盘收起，使fixed-view隐藏
        fixedView.style.display = 'none';
      }

      // 判断最后一个输入框是否被遮挡
      if (lastInputContainerRect.bottom > viewHeight - fixedViewHeight) {
        var offset = lastInputContainerRect.bottom - (viewHeight - fixedViewHeight);
        window.scrollBy(0, offset);
      }
    });
  </script>
</body>

</html>